<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="新建团长" placeholder bgColor="#fff"></u-navbar>
    <view class="content">
      <view class="input-item">
        <view><text style="color: #E20300;">*</text>团长名称：</view>
        <input :disabled="id !== ''" v-model="form.nickName" placeholder="请输入"/>
      </view>
      <view class="input-item">
        <view><text style="color: #E20300;">*</text>手机号码：</view>
        <input type="number" :disabled="id !== ''" v-model="form.phonenumber" maxlength="11" placeholder="请输入"/>
      </view>
      <view class="input-item" style="border: none;">
        <view><text style="color: #E20300;">*</text>分佣比例：</view>
        <input type="number" v-model="form.commissionRate" placeholder="请输入"/>
      </view>
    </view>
    <view class="btn u-m-b-20" @click="submit">保存提交</view>
    <view class="btn" v-if="id" @click="showActivationCode=true">卡券管理</view>
    <u-popup :show="showActivationCode" mode="bottom" @close="showActivationCode=false" :safeAreaInsetBottom="false">
      <view class="customize-popup u-popup">
        <view class="popup-title">卡券管理</view>
        <view class="content u-m-b-20">
          <view class="input-item">
            <view><text style="color: #E20300;">*</text>起始卡号：</view>
            <input type="number" v-model="codeForm.startCode" placeholder="请输入"/>
          </view>
          <view class="input-item">
            <view><text style="color: #E20300;">*</text>末尾卡号：</view>
            <input type="number" v-model="codeForm.endCode" placeholder="请输入"/>
          </view>
        </view>
        <view class="popup-tips">*添加需要是连续的卡号区间</view>
        <view class="btn" @click="save">保存提交</view>
        <scroll-view scroll-y class="scroll">
          <view class="list" v-if="list.length">
            <view class="item" v-for="item in list" :key="item.id">
              <view class="u-flex-1">
                <view class="u-l-b-8">起始卡号：{{ item.startCode }}</view>
                <view>末尾卡号：{{ item.endCode }}</view>
              </view>
              <view style="color: #E20300;" @click="del(item)">解绑</view>
            </view>
          </view>
          <a-empty v-else></a-empty>
				</scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getRecruitmentInfo, addRecruitment, setRecruitment, getActivationCodeList, addActivationCode, delActivationCode } from '@/api/index'
import { phoneReg } from '@/common/util'

export default {
  data() {
    return {
      showActivationCode: false,
      list: [],
      form: {},
      codeForm: {},
      id: '',
    };
  },
  onLoad(options) {
    if(options.id) {
      this.id = options.id
      this.getForm()
      this.getPage()
    }
  },
  methods: {
    getPage() {
      uni.showLoading({ mask: true })
      getActivationCodeList({ id: this.id }).then(res => {
        uni.hideLoading()
        this.list =res.data
      })
    },
    getForm() {
      uni.showLoading({ mask: true })
      getRecruitmentInfo({id: this.id}).then(res => {
        uni.hideLoading()
        if(res.data.commissionRate) {
          res.data.commissionRate = res.data.commissionRate * 100
        }
        this.form = res.data
      })
    },
    del(item) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '确定解绑此卡劵?',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if(confirm) {
            delActivationCode(item).then(res => {
              uni.showToast({
                icon: 'none',
                title: '解绑成功'
              })
              that.getPage()
            })
          }
        }
      })
    },
    save() {
      if(!this.codeForm.startCode) {
        uni.showToast({
          icon: 'none',
          title: '请输入起始卡号'
        })
        return
      }
      if(!this.codeForm.endCode) {
        uni.showToast({
          icon: 'none',
          title: '请输入末尾卡号'
        })
        return
      }
      const parameter = {
        ...this.codeForm,
        "userId": this.id,
      }
      addActivationCode(parameter).then(res => {
        uni.showToast({
          icon: 'none',
          title: `新增成功`
        })
        this.codeForm = {}
        this.getPage()
      })
    },
    submit() {
      const that = this
      if(!phoneReg(this.form.phonenumber)) {
        return
      }
      if(this.form.commissionRate > 98 || this.form.commissionRate < 0) {
        uni.showToast({
          icon: 'none',
          title: '分佣比例区间为0~98'
        })
        return
      }
      if(!this.form.nickName) {
        uni.showToast({
          icon: 'none',
          title: '请输入团长名称'
        })
        return
      }
      if(this.id) {
        const parameter = {
          "userName": this.form.phonenumber,
          "nickName": this.form.nickName,
          "commissionRate": this.form.commissionRate / 100,
        }
        setRecruitment({...parameter, id: this.id, userId: this.id}).then(res => {
          uni.showToast({
						icon: 'none',
						title: `修改成功`
					})
          // setTimeout(() => {
          //   that.goBack()
          // }, 1000)
        })
      } else {
        const parameter = {
          "userName": this.form.phonenumber,
          "nickName": this.form.nickName,
          "password": "123456",
          "phonenumber": this.form.phonenumber,
          "commissionRate": this.form.commissionRate / 100,
          "sex": "0",
          "status": "0",
          "postIds": [ 3 ],
          roleLevel: 'leader',
          parentId: uni.getStorageSync('userInfo').userId,
          "roleIds": [
            3
          ]
        }
        addRecruitment(parameter).then(res => {
          uni.showToast({
						icon: 'none',
						title: `新增成功`
					})
          that.id = res.data
          that.getForm()
          // setTimeout(() => {
          //   that.goBack()
          // }, 1000)
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .content {
    width: 702rpx;
    margin: 12rpx auto 120rpx;
    padding: 0 22rpx;
    background-color: #fff;
    border-radius: 12rpx;
    .input-item {
      width: 100%;
      padding: 30rpx 0;
      border-bottom: 2rpx solid #E1E1E1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      color: #000000;
    }
    input {
      flex: 1;
      font-size: 28rpx;
      color: #818181;
    }
  }
  .btn {
    width: 440rpx;
    height: 90rpx;
    background: #56CB03;
    border-radius: 200rpx;
    border: 2rpx solid #56CB03;
    font-size: 28rpx;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  .u-popup {
    background-color: #F5F5F5;
    padding: 30rpx 0 0 ;
    .popup-tips {
      font-size: 24rpx;
      color: rgba(226, 3, 0, 1);
      text-align: center;
      margin-bottom: 16rpx;
    }
    .scroll {
      height: calc(80vh - 400rpx);
      width: 702rpx;
      margin: 20rpx auto 0;
      padding: 0 0 80px;
      border-radius: 12rpx;
      .list {
        display: flex;
        flex-direction: column;
        gap: 12rpx;
        width: 702rpx;
        margin: 0 auto;
        margin-top: 12rpx;
        .item {
          width: 100%;
          background-color: #fff;
          border-radius: 12rpx;
          padding: 20rpx 24rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 28rpx;
          color: #000000;
        }
      }
    }
  }
}
</style>
